<template>
    <div id="maincat">

        <div class="mulu">目录</div>

        <div align="center">
<!--            <el-radio-group v-model="isCollapes" style="margin-bottom: 10px;margin-top: 10px;">-->
<!--                <el-radio-button :label="false" >展开</el-radio-button>-->
<!--                <el-radio-button :label="true">收起</el-radio-button>-->
<!--            </el-radio-group>-->
        </div>


        <el-menu default-active="1-1"

                 class="el-menu-vertical-demo"
                 background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 :collapse="isCollapes" >

            <el-submenu index="1" class="sub1">
                <template slot="title" class="title" >
                    <i class="el-icon-location"></i>
                    <span >第一部分 舆情风险分类</span>
                </template>

                <el-menu-item-group>
                    <template slot="title" >舆情风险点</template>
                    <el-menu-item  v-for="(item,index) in type1" :key="index"
                                   :index="'1-'+item.type"
                                   @click="getclick(item.type)">
                        <span style="display: block;width: 90%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size:13px" :title="item.name">{{item.name}}</span>
                    </el-menu-item>

                </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2" class="sub1">
                <template slot="title" >
                    <i class="el-icon-menu"></i>
                    <span >第二部分 禁忌话语</span>
                </template>
                <el-menu-item-group>
                    <template slot="title">因素分类</template>
                    <el-menu-item :index="'2-'+item.type" v-for="(item,index) in type2" :key="index" @click="getjjclick(item.type)">
                        <span>{{item.name}}</span>
                    </el-menu-item>
                </el-menu-item-group>


            </el-submenu>
        </el-menu>




    </div>
</template>

<script>

    import {getYuqingType} from "../../network/yuqing";
    import {getJinjiCatalog, getJinjiType} from "../../network/jinji";



    export default {
        name: "maincat",
        data(){
            return{
                isCollapes:true,
               type1:[],
                type2:[],
                jjtype1:[],
                jjtype2:[],


            }
        },
        components: {},
        created() {
            getYuqingType().then(res=>{
                this.type1 = res.data
                // console.log(this.type1);
            })

            getJinjiType().then(res=>{
                //console.log(res.data);
                const jjtype = res.data
                for(let i=0 ;i<=6 ; i++){
                    if (i<5) {
                        this.jjtype1.push(jjtype[i])
                    }
                    else{
                        this.jjtype2.push(jjtype[i])
                    }
                }

            })
            // console.log(this.jjtype1);
            // console.log(this.jjtype2);


            getJinjiCatalog().then(res=>{
               this.type2=res.data;

            })
        },
        filters:{
            getname(value){

                const arr = value.split("：")

                return arr[1]
            }
        },
        methods:{
            ont1(){

                this.$router.replace('/yuqing/1')
            },
            ont2(){
                this.$router.replace('/jinji/0101')
            },
            onjt(type,name){
                this.$router.replace(
                    '/jinji/' + type
                )
                const nt={
                    type,
                    name
                }
                this.$bus.$emit('jtitemclick', nt)
            },

            getjjclick(type){
                // console.log(type);
                this.$router.replace('/jinji/'+type)
                this.$bus.$emit('jmenuclick',type)

            },

            getclick(type) {

                this.$bus.$emit('itemclick', type)
                this.$router.replace('/yuqing/' + type)

            }
        }
    }
</script>

<style>
    .el-menu-vertical-demo:not(.el-menu--collapse){
        width:100%;
        height: 100%;

    }



    #maincat{

        background-color: #545c64;
        box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);
        border-radius: 4px;
        border-color: #545c64;
        height: 100%;
    }



    .el-radio-button__inner{
        padding:2px !important;
    }



    .el-submenu__title {
            padding-left: 20px !important;
    }





    .el-radio-button{
        font-family: KaiTi;
    }



    .mulu{

        flex:1;
        font-family:"KaiTi" ;
        color:#fff ;
        text-align: center;
    }




    .el-menu{

    }

    .el-menu-item{
        padding: 0px 0px;
    }


</style>